<template>
  <div class="details">
    <div class="head">
      <div class="back" @click="FnCarList">
        <span class="iconfont">&#xe605;</span>
      </div>
      <div class="share">
        <span class="iconfont">&#xe60f;</span>
        <span class="iconfont">&#xe6a7;</span>
        <span class="iconfont">&#xe602;</span>
      </div>
    </div>
    <div class="content">
      <div class="banner" ref="banner">
        <img
          src="./../../assets/images/home/Details-CarBackground.jpg"
          alt=""
        />
      </div>
      <div class="survey">
        <div class="price-column">
          <div class="price">19.58<span>万</span></div>
          <div class="shui">新车含税价：47.76万</div>
          <div class="reduction">
            <img
              src="./../../assets/images/home/xiangqing_icon_05.jpg"
              alt=""
            />
            <p>降价提醒</p>
          </div>
        </div>

        <div class="title">凯迪拉克 CT4 2020款 2.0T 自动 28T时尚型</div>
        <div class="abrasion">
          <div class="all">
            <div>
              <span class="s">8</span>
              <span class="g">5</span>
            </div>
            <div>成新</div>
          </div>
          <div class="appearance">
            <p>85成新</p>
            <img
              src="./../../assets/images/home/xiangqing_icon_12.jpg"
              alt=""
            />
          </div>
          <div class="appearance">
            <p>85成新</p>
            <img
              src="./../../assets/images/home/xiangqing_icon_15.jpg"
              alt=""
            />
          </div>
          <div class="appearance">
            <p>85成新</p>
            <img
              src="./../../assets/images/home/xiangqing_icon_17.jpg"
              alt=""
            />
          </div>
          <img
            src="./../../assets/images/home/xiangqing_icon_09.jpg"
            alt=""
            class="more"
          />
        </div>
      </div>
      <div class="service">
        <div class="bystages">
          <span>分期</span>
          <div>
            <span> 首付5.678万，月供8109元 </span>
            <img
              src="./../../assets/images/home/xiangqing_icon_09.jpg"
              alt=""
            />
          </div>
        </div>
        <div class="logistics">
          <span>物流</span>
          <div>
            <span>西安运往北京 物流费</span>
            <img
              src="./../../assets/images/home/xiangqing_icon_23.jpg"
              alt=""
            />
          </div>
        </div>
        <div class="agency">
          <span>代办</span>
          <div>
            <span>
              <i>限免</i>
              运往北京 物流费1766元</span
            >
            <img
              src="./../../assets/images/home/xiangqing_icon_23.jpg"
              alt=""
            />
          </div>
        </div>
        <div class="guarantee">
          <span>保障</span>
          <div>
            <span>
              <img
                src="./../../assets/images/home/xiangqing_icon_26.jpg"
                alt=""
              />
              7天无理由退车
              <img
                src="./../../assets/images/home/xiangqing_icon_26.jpg"
                alt=""
              />
              1年包退
              <img
                src="./../../assets/images/home/xiangqing_icon_26.jpg"
                alt=""
              />
              1年全国保修
            </span>
            <img
              src="./../../assets/images/home/xiangqing_icon_23.jpg"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="recommend">
        <div class="title">
          <span> 推荐理由</span>
          <span>
            <img
              src="./../../assets/images/home/xiangqing_icon_36.jpg"
              alt=""
            />
            有用
            <img
              src="./../../assets/images/home/xiangqing_icon_38.jpg"
              alt=""
            />
          </span>
        </div>
        <div class="reason">
          胎压报警，主动刹车系统，倒车影像，定速巡航，双天窗，感应电尾，无钥匙启动，无钥匙进入，全液晶仪表，双触控液晶屏，蓝牙，LED大灯，氛围灯，自动空调，后排独立空调等等奢华配置
        </div>
        <img src="./../../assets/images/home/tuan_03.jpg" alt="" />
      </div>
      <div class="basic-information">
        <div class="title">
          <span>基础信息</span>
          <span>编号30516789</span>
        </div>
        <div class="information">
          <div>
            <span>上牌</span>
            <span></span>
          </div>
          <div>
            <span>里程</span>
            <span>表显万公里</span>
          </div>
          <div>
            <span>排放</span>
            <span>国5 可异地上牌</span>
          </div>
          <div>
            <span>变速箱</span>
            <span>CVT无级变速</span>
          </div>
          <div>
            <span>排量</span>
            <span></span>
          </div>
          <div>
            <span>车色</span>
            <span>黑色/内饰棕色</span>
          </div>
          <div>
            <span>年检</span>
            <span></span>
          </div>
          <div>
            <span>过户次数</span>
            <span>1次</span>
          </div>
          <div>
            <span>类型</span>
            <span>中大型车 轿车</span>
          </div>
        </div>
        <div class="all">查看全部参数</div>
      </div>
      <div class="configure">
        <div class="title">配置亮点</div>
        <div class="con">
          <div>
            <div>
              <img src="./../../assets/images/home/icon_20.jpg" alt="" />
            </div>

            <p>自动驻车</p>
          </div>
          <div>
            <div>
              <img src="./../../assets/images/home/icon_21.jpg" alt="" />
            </div>

            <p>方向盘换挡</p>
          </div>
          <div>
            <div>
              <img src="./../../assets/images/home/icon_07.jpg" alt="" />
            </div>

            <p>胎压检测</p>
          </div>
          <div>
            <div>
              <img src="./../../assets/images/home/icon_09.jpg" alt="" />
            </div>

            <p>自动车灯</p>
          </div>
          <div>
            <div>
              <img src="./../../assets/images/home/icon_15.jpg" alt="" />
            </div>

            <p>电动座椅</p>
          </div>
          <div>
            <div>
              <img src="./../../assets/images/home/icon_18.jpg" alt="" />
            </div>
            <p>车联网</p>
          </div>
          <div>
            <div>
              <img src="./../../assets/images/home/icon_16.jpg" alt="" />
            </div>

            <p>后排遮阳帘</p>
          </div>
          <div>
            <div>
              <img src="./../../assets/images/home/icon_17.jpg" alt="" />
            </div>
            <p>后视镜加热</p>
          </div>
        </div>
      </div>
      <div class="inquiry">
        <div class="title">问大家（13）</div>
        <div class="con">
          <div class="item">
            <img src="./../../assets/images/home/icon_27.jpg" alt="" />
            <span>有异味吗</span>
            <span>14个回答</span>
          </div>
          <div class="item">
            <img src="./../../assets/images/home/icon_27.jpg" alt="" />
            <span>有异味吗</span>
            <span>14个回答</span>
          </div>
        </div>
        <div class="all">查看全部回答</div>
      </div>
    </div>
    <div class="footer">
      <div class="kefu">
        <span>
          <img
            src="./../../assets/images/home/details-consulting-service.jpg"
            alt=""
            class="details-consulting-service-img"
          />
        </span>
        <p>客服</p>
      </div>
      <div class="collection">
        <span>
          <img
            src="./../../assets/images/home/details-like.jpg"
            alt=""
            class="details-like-img"
          />
        </span>
        <p>收藏</p>
      </div>
      <div class="box">
        <div class="phone">电话咨询</div>
        <div class="price-list">报价单</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 跳转到列表页
    FnCarList(){
       this.$router.push("./CarList");
    }
  },
};
</script>
<style lang="less" scoped>
.details {
  width: 750px;
  position: relative;
  background: #f8f8f8;

  .head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    line-height: 64px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
    .back {
      span {
        font-size: 35px;
      }
    }
    .share {
      span {
        font-size: 34px;
        display: inline-block;
        margin: 0 15px;
      }
    }
  }
  .footer {
    position: absolute;
    background: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    height: 105px;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .kefu {
      span {
        .details-consulting-service-img {
          width: 37px;
          height: 37px;
          display: block;
          margin: 27px auto 12px;
        }
      }

      p {
        font-size: 20px;
        color: #969696;
      }
    }
    .collection {
      span {
        .details-like-img {
          width: 37px;
          height: 37px;
          display: block;
          margin: 27px auto 12px;
        }
      }

      p {
        font-size: 20px;
        color: #969696;
      }
    }
    .box {
      display: flex;
    }
    .phone {
      width: 200px;
      height: 80px;
      background: #fc950a;
      text-align: center;
      line-height: 80px;
      font-size: 28px;
      color: #fff;
      border-radius: 40px;
      margin-right: 10px;
    }
    .price-list {
      width: 200px;
      height: 80px;
      background: #fc950a;
      text-align: center;
      line-height: 80px;
      font-size: 28px;
      color: #fff;
      border-radius: 40px;
    }
  }
  .content {
    width: 100%;
    height: 100vh;
    background: #f8f8f8;
    overflow: scroll;
    box-sizing: border-box;
    padding-bottom: 105px;
    .banner {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .survey {
      border-radius: 20px;
      margin-top: -12px;
      background: #fff;
      padding-bottom: 64px;
      .price-column {
        width: 100%;

        box-sizing: border-box;
        padding: 43px;
        display: flex;
        .price {
          font-size: 48px;
          color: #dd590e;
          font-weight: bold;
          span {
            font-size: 22px;
          }
        }
        .shui {
          font-size: 24px;
          color: #969696;
          padding: 20px 148px 0 25px;
        }
        .reduction {
          text-align: center;
          img {
            width: 30px;
          }
          p {
            font-size: 20px;
            color: #8b8b8b;
          }
        }
      }
      .title {
        padding-left: 43px;
        font-size: 34px;
      }
      .abrasion {
        height: 80px;
        display: flex;
        align-items: center;
        padding-left: 50px;
        padding-right: 70px;
        position: relative;
        margin-top: 44px;
        justify-content: space-between;
        .more {
          width: 24px;
          position: absolute;
          right: 34px;
        }
        > div {
          width: 25%;
          height: 100%;
          border-right: 1px solid #ccc;
        }
        > div:last-of-type {
          border: none;
        }
        .all {
          display: flex;
          padding-right: 24px;
          box-sizing: border-box;
          > div:first-child {
            padding-left: 28px;
            flex: 1;
            .s {
              font-size: 62px;
            }
            .g {
              font-size: 46px;
            }
          }
          > div:last-child {
            width: 18px;
            font-size: 12px;
            line-height: 1;
            padding-top: 18px;
          }
        }
        .appearance {
          text-align: center;
          > p {
            font-size: 20px;
            padding-bottom: 16px;
          }
          > img {
            width: 95px;
          }
        }
      }
    }
    .service {
      margin-top: 15px;
      background: #fff;
      .bystages {
        height: 95px;
        line-height: 95px;
        padding-left: 43px;
        display: flex;
        padding-right: 40px;
        > span {
          font-size: 22px;
          color: #777;
        }
        > div {
          flex: 1;
          position: relative;
          box-sizing: border-box;
          padding-left: 30px;
          border-bottom: 1px solid #f6f6f6;
          > span {
            font-size: 22px;
            color: #dd590e;
          }
          > img {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 18px;
          }
        }
      }
      .logistics {
        height: 95px;
        line-height: 95px;
        padding-left: 43px;
        display: flex;
        padding-right: 40px;
        > span {
          font-size: 22px;
          color: #777;
        }
        > div {
          flex: 1;
          position: relative;
          box-sizing: border-box;
          padding-left: 30px;
          border-bottom: 1px solid #f6f6f6;
          > span {
            font-size: 22px;
            color: #353535;
          }
          > img {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 37px;
          }
        }
      }
      .agency {
        height: 95px;
        line-height: 95px;
        padding-left: 43px;
        display: flex;
        padding-right: 40px;
        > span {
          font-size: 22px;
          color: #777;
        }
        > div {
          flex: 1;
          position: relative;
          box-sizing: border-box;
          padding-left: 30px;
          border-bottom: 1px solid #f6f6f6;
          > span {
            font-size: 22px;
            color: #353535;
            > i {
              display: inline-block;
              width: 57px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              color: #c7512c;
              border-radius: 10px;
              margin-right: 13px;
              border: 1px solid #c7512c;
            }
          }
          > img {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 37px;
          }
        }
      }
      .guarantee {
        height: 95px;
        line-height: 95px;
        padding-left: 43px;
        display: flex;
        padding-right: 40px;
        > span {
          font-size: 22px;
          color: #777;
        }
        > div {
          flex: 1;
          position: relative;
          box-sizing: border-box;
          padding-left: 30px;
          border-bottom: 1px solid #f6f6f6;
          > span {
            font-size: 22px;
            color: #353535;
            > img {
              width: 28px;
            }
          }
          > img {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 37px;
          }
        }
      }
    }
    .recommend {
      position: relative;
      margin-top: 15px;
      background: #fff;
      padding-left: 43px;
      padding-right: 48px;
      padding-bottom: 114px;
      .title {
        height: 140px;
        line-height: 140px;
        > span:first-child {
          font-size: 40px;
        }
        > span:last-of-type {
          float: right;
          > img {
            width: 40px;
          }
          > img:last-of-type {
            margin-left: 30px;
          }
        }
      }
      > img {
        width: 377px;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
    .basic-information {
      background: #fff;
      padding: 43px;
      margin-top: 15px;
      .title {
        height: 140px;
        line-height: 140px;
        > span:first-child {
          font-size: 40px;
        }
        > span:last-of-type {
          float: right;
        }
      }
      .information {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        > div {
          width: 50%;
          height: 72px;
          line-height: 72px;
          > span:first-of-type {
            font-size: 24px;
            color: #898989;
            line-height: 72px;
            display: inline-block;
          }
          > span:last-of-type {
            display: inline-block;
            padding-left: 23px;
          }
        }
      }
      .all {
        width: 665px;
        height: 92px;
        background: #f7f9f8;
        margin: auto;
        border-radius: 40px;
        text-align: center;
        line-height: 92px;
        font-size: 25px;
        color: #c7512c;
        margin-top: 15px;
      }
    }
    .configure {
      background: #fff;
      padding: 43px;
      margin-top: 15px;
      .title {
        height: 140px;
        line-height: 140px;
        font-size: 40px;
      }
      .con {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        > div {
          width: 25%;
          text-align: center;
          > div {
            padding-top: 8px;
            height: 86px;
            position: relative;
            img {
              width: 80px;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              top: 0;
              margin: auto;
            }
          }

          p {
            font-size: 24px;
            padding-top: 10px;
          }
        }
      }
    }
    .inquiry {
      background: #fff;
      padding: 43px;
      margin-top: 15px;
      .title {
        height: 140px;
        line-height: 140px;
        font-size: 40px;
      }
      .con {
        .item {
          height: 68px;
          line-height: 68px;
          img {
            height: 38px;
            vertical-align: middle;
            margin-right: 8px;
          }
          > span:last-of-type {
            float: right;
          }
        }
      }
      .all {
        width: 665px;
        height: 92px;
        background: #f7f9f8;
        margin: auto;
        border-radius: 40px;
        text-align: center;
        line-height: 92px;
        font-size: 25px;
        color: #c7512c;
        margin-top: 15px;
      }
    }
  }
}
</style>